<template>
  <div class="task">
      <div class="error_mes" v-bind:class="isA?'error_mes_open':''">{{errorMes}}</div>
      <div class="bounced_box">
          <h2>注册</h2>
          <span class="iconfont close" v-on:click="closeRegistered">&#xe634;</span>
          <form>
              <input type="text" placeholder="请输入用户名" v-model="username" v-on:focus='closeErr'><br>
              <input type="text" placeholder="请输入邮箱号码" class="email" v-model="email" v-on:focus='closeErr' v-on:keydown="openEmailCode"><br>
              <div class="email_code" v-if="isemailCode">
                   <input type="text" placeholder="邮箱验证码" v-model="emailCode" >
                   <div class="bule" v-on:click="getEmailCode">{{getEmail}}</div>
              </div>
              <input type="password" placeholder="请输入密码" v-on:focus='closeErr' v-model="password"><br>
              <button v-on:click.prevent="doRegistered">提交</button>
          </form>
          <div class="registered clearfloat">
              <p><span v-on:click="switchLogin">已有账号登录</span></p>
          </div>
          <div class="third">
              <p>第三方账号登录：</p>
              <ul>
                  <li><span class="iconfont">&#xe627;</span></li>
                  <li><span class="iconfont">&#xe68c;</span></li>
                  <li><span class="iconfont">&#xe6a4;</span></li>
              </ul>
          </div>
      </div>
  </div>
</template>
<script>
import axios from 'axios'

    export default {
        name:'registered',
        data(){
            return{
                email:"",
                username:"",
                password:"",
                errorMes:"",
                emailCode:"",
                isA:false,
                getEmail:"获取验证码",
                isemailCode:false
            }
        },
        computed:{

        },
        methods:{
            closeRegistered:function(){
                 this.$store.commit('ISREGISBOX',false)
            },
            switchLogin:function(){
                this.$store.commit('ISREGISBOX',false)
                 this.$store.commit('LOGINBOX',true)
            },
            openEmailCode:function(){
         
                if(this.email.length>=5){
                     this.isemailCode = true
                }else{
                    this.isemailCode = false
                }
            },
            getEmailCode:function(){
                  var that = this
                if(this.email===""){
                    this.errorMes="邮箱不能为空"
                    this.isA = true;
                }else if(!this.email.match(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)){
                    this.errorMes="邮箱格式不对"
                    this.isA = true;
                }else{
                   this.getEmail="已发送" 
                    axios.post('/api/registered/getEmailCode',{
                        email:this.email
                    }).then(function(response){
                        if(response.data.state==='-1'){
                             that.errorMes=response.data.message
                             that.isA = true;
                        }
                    }).catch(function(err){
                        
                    })
                }
            },
            doRegistered:function(){
                var that = this
                if(this.email===""){
                    this.errorMes="邮箱不能为空"
                    this.isA = true;
                }else if(this.username===''){
                    this.errorMes="用户名不能为空"
                    this.isA = true;
                }else if(this.password===""){
                    this.errorMes="密码不能为空"
                    this.isA = true;
                }else if(!this.email.match(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)){
                    this.errorMes="邮箱格式不对"
                    this.isA = true;
                }else if(this.emailCode===""){
                    this.errorMes="验证码不能为空"
                    this.isA = true;
                }else{
                    axios.post('/api/registered',{
                        email:this.email,
                        username:this.username,
                        password:this.password,
                        emailCode:this.emailCode
                    }).then(function(response){
                       
                        if(response.data.state==='-1'){
                            that.errorMes=response.data.message
                            that.isA = true;
                        }else if(response.data.state==='1'){
                            that.errorMes=response.data.message
                            that.isA = true;
                            setTimeout(function(){
                                that.$store.commit('ISREGISBOX',false)
                                that.isA = false;
                                that.$store.commit('ISLOGING',true);
                                that.$store.commit('USERID',response.data.userId);
                                that.$store.commit('USERNAME',response.data.username);
                                that.$store.commit('HEADERIMG',response.data.headerImg);
                            },1000)

                        }else if(response.data.state==='0'){
                            that.errorMes=response.data.message
                            that.isA = true;
                        }
                    })
                }
            },
            closeErr:function(){
                this.isA = false;
            }
        }
    }
</script>
<style scoped lang="scss" src="../../assets/css/login.scss">

</style>
